/**
 * @class
 * @description 左下角面板信息
 * @constructor
 */
import BaseContext from '../context';
export default class Panel extends BaseContext {
  //初始化操作
  init() {
    this.initEvent();
    this.loadHtml();
    setInterval(() => this.staticTime.innerHTML = this.time, 1000);
  }

  initEvent() {
    this.listener({
      chapterChange: this.chapterChange.bind(this),
      chapterIndexChange: this.chapterIndexChange.bind(this),
    })
  }
  // 章节图片序号变化
  chapterIndexChange(index) {
    if (!this.staticPage) return;
    const currentChapter = this.currentChapter;
    const len = currentChapter.chapterList.length;
    this.staticPage.innerHTML = `${index || 1}/${len}`;
  }
  chapterChange() {
    if (!this.staticChapter) return;
    const currentChapter = this.currentChapter;
    this.staticChapter.innerHTML = currentChapter.chapterNumName;
  }
  selectorDOM() {
    this.staticChapter = this.container.querySelector('#js_staticChapter');
    this.staticPage = this.container.querySelector('#js_staticPage');
    this.staticTime = this.container.querySelector('#js_staticTime');
  }

  // 页面渲染
  loadHtml() {
    const template = this.template;
    if (template.panelInfo) {
      const currentChapter = this.currentChapter;
      const strNodes = template.panelInfo({
        name: currentChapter.chapterNumName,
        time: this.time,
        page: '0/0',
        hasCopyright: this.comicInfo.hasCopyright
      });
      const nodes = this.util.createDocumentHtml(strNodes);
      this.container.append(nodes);
      this.selectorDOM();
    }
  }
  zero(num) {
    if (num > 0 && num < 10) {
      return '0' + num;
    } else {
      return num;
    }
  }
  get time() {
    const d = new Date();
    return `${this.zero(d.getHours())}:${this.zero(d.getMinutes())} ${this.zero(d.getSeconds())}`
  }
}
